<template>
  <div class="center-item-content card-color card-margin content-margin" >
    <div class="box-card">
      <div slot="header" class="clearfix">
        <h5><i class="el-icon-link"/>&nbsp;评论&nbsp;<i class="el-icon-link"/></h5>
        <!--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
      </div>
      <div style="display: flex;flex-direction: column;">
        <my-comment class="comment comment-panel" v-for="item in noteComments" :noteComment="item" :key="item.id" @setCallback="setCallback">
          {{item.content}}
        </my-comment>
        <div v-if="noteComments.length<=0" style="height:50px;line-height:50px;" class="comment-background">
          ~~~没有评论呢~~~
        </div>
        <!--<div class="comment" v-for="item in 10" :key="item">
          <div style="display: flex;flex-direction: row;justify-content: space-between;"><h3>昵称{{item}}</h3><div>2019年12月28日</div></div>
          <div>该生在本学期尊敬师长,团结同学,学习成绩有所提高,热心班级事务.上课认真听讲,按时完成老师布置的各项任务.端正学习态度,明确学习目标.乐于助人,关心同学,与同学相处融洽.希望今后更加勤学好问,加强自己思维能力方面训练,坚持不懈,争取更大进步.</div>
        </div>-->
        <el-divider content-position="left"> 撰写评论</el-divider>
        <div style="padding:5px;">
          <el-row>
            <el-col :xs="24" :sm="24" :md="1" :lg="1" :xl="1"><div class="vertical-center">昵称：</div></el-col>
            <el-col :xs="24" :sm="24" :md="5" :lg="5" :xl="5"><div class="vertical-center"><el-input v-model="noteComment.name" /></div></el-col>
            <el-col :xs="24" :sm="24" :md="1" :lg="1" :xl="1"><div class="vertical-center">内容：</div></el-col>
            <el-col :xs="24" :sm="24" :md="7" :lg="7" :xl="10"><div class="vertical-center">
              <el-input style="width:99%;" v-model="noteComment.content"></el-input></div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="7"><div class="vertical-center">
              <el-button type="success" @click="addNoteComment">提交{{ReplyName}}</el-button>
              <el-button v-if="Reply" type="primary" @click="cancelReply">取消回复</el-button>
            </div>
            </el-col>
          </el-row>

        </div>
      </div>

    </div>

  </div>
</template>

<script>
import request from '@/utils/request'
import myComment from './comment'
export default {
  components: {
    myComment
  },
  props: {
    note: {
      type: Object,
      default: () => {}
    }
  },
  name: 'content',
  data: function () {
    return {
      page: {
        'size': 5,
        'current': 1
      },
      noteComments: [],
      noteComment: {
        level: 1,
        parent: ''
      },
      Reply: false,
      ReplyName: ''
    }
  },
  watch: {
    note: {
      handler: function (note) {
        this.note = note
      },
      immediate: true
    }
  },
  created () {
    this.queryNoteComments()
  },
  methods: {
    queryNoteComments: function () {
      if (!this.note) return
      const conditions = [
        { 'field': 'note_id', 'symbol': 'EQ', 'type': 'STRING', 'value': this.note.id },
        { 'field': 'level', 'symbol': 'EQ', 'type': 'NUMBER', 'value': 1 }
      ]
      this.page.conditions = conditions
      request({
        url: '/notebook/comment/query',
        method: 'post',
        data: this.page
      }).then(res => {
        if (res.result) {
          this.noteComments = res.data.data
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => { console.log('done') })
    },
    addNoteComment: function () {
      this.noteComment.note_id = this.note.id
      request({
        url: '/notebook/comment/add',
        method: 'post',
        data: this.noteComment
      }).then(res => {
        if (res.result) {
          this.$message.success(res.msg)
          this.queryNoteComments()
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => { console.log('done') })
    },
    setCallback: function (comment) {
      this.noteComment.parent = comment.id
      this.noteComment.level = 2
      this.Reply = true
      this.ReplyName = '@' + comment.name
    },
    cancelReply: function () {
      this.Reply = false
      this.noteComment.parent = ''
      this.noteComment.level = 1
      this.ReplyName = ''
    }
  }
}
</script>

<style>
  .comment {
    width:100%;
    min-height:80px;
    background-color: #eaeaea;
    border-bottom: solid 1px #ccc;
    padding: 8px;
    box-sizing: border-box;
  }

  .comment-panel {
    border-left:solid 1px blue;
    text-align: justify;
    word-break: break-all;
    overflow-wrap: break-word;
  }

  .comment-title-interval{
    margin:0 5px;
  }

  .el-divider__text {
    background-color: transparent;
  }

  .comment-background {
    background-color: #ffffffd1;
  }

  .comment-title {
    width:100%;
    display:flex;
    flex-direction: row;
    line-height:36px;
  }

  .comment-title-interval {
    padding-top: 5px;
  }

  /* 当屏幕宽度小于 600px 时 */
  @media screen and (max-width: 700px) {
    .comment-title {
      width:100%;
      display:flex;
      flex-direction: column;
      line-height:36px;
      text-align: center;
    }
  }
</style>
